<template>
  <div>
    <h3>v-model原理</h3>
    <!-- 在template区域,如果使用事件对象,则使用$event 代替e  -->
    <!--对于输入框来说 v-model 相当于 :value + @input -->
    <!-- <input type="text" :value="uname" @input="uname=$event.target.value">  <br/> -->
    <!-- 对于单个复选框来说  v-model 相当于 :checked + @change -->

    <!-- 使用子组件,实现v-model   -->
    <my-input :value="uname" @input="(val)=>{uname=val}"></my-input>
    <my-input v-model="uname"></my-input>
  </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: { MyInput },
  data(){
    return {
      uname:'张三'
    }
  }
}
</script>

<style>

</style>